<script setup>
import { ref, watch } from "vue"; //引入响应式状态函数

//引入折线图所需的组件
import dayjs from "dayjs"; //引入dayjs日期库
import { fetch24HourData } from "@/api/weatherAPI";
import { initBasicLineChart } from "../util/echarts";
//声明一个变量获取未来24小时的天气数据，此数组有24个，是数组
const hour24 = ref([]); //表示此数据是空数组,用来存放api中返回的24小时天气数据
//声明两个变量分别存放预报时间和温度
const hour24FxTime = ref([]); //存放未来24小时预报时间
const hour24Temp = ref([]); //存放未来24小时的温度
const updateTime = ref(""); //天气更新时间
const chartDom = ref(null);
//调用网络请求的函数
import { useCityStore } from "../stores/cityStore";
//获取store实例
const cityStore = useCityStore();

//添加侦听器:监听状态管理中location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数,当数据源有变化时，需要做的事情
  () => {
    getData(cityStore.location.id);
  },
  //即时回调，初始状态执行一个回调函数【请求未来24小时天气预报数据函数】
  { immediate: true }
);

//调用网络请求
//getData(cityStore.location.id);
// //封装一个函数，实现网络请求获取api数据功能
// function getData() {
//   axios
//     .get("https://devapi.qweather.com/v7/weather/24h", {
//       params: {
//         location: "101010100",
//         key: "04ac3f1fe497469a80d713b9f737020c",
//       },
//     })
//     .then(function (response) {
//       //请求成功之后，返回数据
//       console.log(response.data);
//       updateTime.value = dayjs(response.data.updateTime).format('YYYY年MM月DD日  HH时mm分') //保存后端获取的更新时间updatTime
//       hour24.value = response.data.hourly; //把响应数据临时先保存到hour24中
//       //遍历未来24小时数据，把fxTime（预报时间）和temp（温度）提取出来放到hour24FxTime和hour24Temp
//       hour24.value.forEach((element) => {
//         hour24FxTime.value.push(element.fxTime); //预报时间     push(dayjs(element.fxTime).format('HH'))
//         hour24Temp.value.push(element.temp); //文档
//       });
//       //调用图标函数
//       initEcharts(
//         hour24FxTime.value.map((x) => dayjs(x).format('HH')),
//         hour24Temp.value);
//     })
//     .catch(function (error) {
//       console.log(error);
//     })
//     .finally(function () {
//       // 总是会执行
//     });
// }
async function getData(locationID) {
  const res = await fetch24HourData(locationID);
  console.log(res);
  updateTime.value = dayjs(res.updateTime).format("YYYY年MM月DD日  HH时mm分"); //保存后端获取的更新时间updatTime
  hour24.value = res.hourly; //把响应数据临时先保存到hour24中
  //遍历未来24小时数据，把fxTime（预报时间）和temp（温度）提取出来放到hour24FxTime和hour24Temp
  //初始化未来24小时时间和温度的数组为空
  hour24FxTime.value = [];
  hour24Temp.value = [];

  hour24.value.forEach((element) => {
    hour24FxTime.value.push(element.fxTime); //预报时间     push(dayjs(element.fxTime).format('HH'))
    hour24Temp.value.push(element.temp); //文档
  });
  //调用图标函数
  initBasicLineChart(
    chartDom.value,
    hour24FxTime.value.map((x) => dayjs(x).format("HH")),
    hour24Temp.value
  );
}

//调用axios封装及api模块的函数
// const getData = async()=>{
//   const res = await fetch24HourData()
//   console.log(res)
// }

//vue3中引入dom元素的方式，此为第一步
//封装一个函数，实现echarts图表的功能

// function initEcharts(xAxisData, seriesData) {
//   echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
//   //var chartDom = document.getElementById("main");
//   var myChart = echarts.init(chartDom.value); //vue中引入dom元素的方式，此为第三步：访问dom
//   var option = {
//     xAxis: {
//       type: "category",
//       data: xAxisData,
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         data: seriesData,
//         type: "line",
//       },
//     ],
//   };

//   option && myChart.setOption(option);
// }
</script>

<template>
  <div>
    <h3>未来24小时天气预报</h3>
    <div>
      <span>最后更新时间：{{ updateTime }}</span>
    </div>
    <!-- {{ hour24 }} -->
    <!-- <ul>
      <li v-for="(item, index) in hour24" :key="index">
        {{ index }} - <span>预报时间:</span> {{ item.fxTime }} -
        <span>温度：</span>{{ item.temp }}
      </li>
    </ul> -->
    <!-- 添加图标库所需要的容器 -->
    <!-- vue3中引入dom元素的方式,第二步，添加ref属性与第一步进行绑定 -->
    <div id="main" ref="chartDom"></div>
  </div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}
</style>